<template>
  <div :class="cardClasses" @click="handleClick">
    <div class="card-content">
      <div class="card-rank">{{ displayRank }}</div>
      <div class="card-suit" v-if="!isJoker">{{ displaySuit }}</div>
      <div class="card-joker-text" v-if="isJoker">{{ displayRank }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Card, CardSuit, SUIT_NAMES, RANK_NAMES } from '../types/card'

interface Props {
  card: Card
  selected?: boolean
  size?: 'tiny' | 'small' | 'medium' | 'large'
  disabled?: boolean
  played?: boolean // 是否已被出过
}

interface Emits {
  (e: 'click', card: Card): void
}

const props = withDefaults(defineProps<Props>(), {
  selected: false,
  size: 'medium',
  disabled: false,
  played: false,
})

const emit = defineEmits<Emits>()

// 计算属性
const isJoker = computed(
  () =>
    props.card.suit === CardSuit.SMALL_JOKER ||
    props.card.suit === CardSuit.BIG_JOKER
)

const isRed = computed(
  () =>
    props.card.suit === CardSuit.HEART || props.card.suit === CardSuit.DIAMOND
)

const displayRank = computed(() => RANK_NAMES[props.card.rank])

const displaySuit = computed(() => {
  const suitSymbols = {
    [CardSuit.SPADE]: '♠',
    [CardSuit.HEART]: '♥',
    [CardSuit.DIAMOND]: '♦',
    [CardSuit.CLUB]: '♣',
  }
  return suitSymbols[props.card.suit] || ''
})

const cardClasses = computed(() => [
  'poker-card',
  `poker-card--${props.size}`,
  {
    'poker-card--selected': props.selected,
    'poker-card--red': isRed.value && !isJoker.value,
    'poker-card--black': !isRed.value && !isJoker.value,
    'poker-card--joker': isJoker.value,
    'poker-card--disabled': props.disabled,
    'poker-card--played': props.played,
  },
])

// 事件处理
const handleClick = () => {
  if (!props.disabled && !props.played) {
    emit('click', props.card)
  }
}
</script>

<style scoped>
.poker-card {
  position: relative;
  background: var(--card-white);
  border: 2px solid var(--card-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 尺寸变体 */
.poker-card--tiny {
  width: 20px;
  height: 28px;
  font-size: 10px;
}

.poker-card--small {
  width: var(--card-width-sm);
  height: var(--card-height-sm);
  font-size: 14px;
}

.poker-card--medium {
  width: var(--card-width-md);
  height: var(--card-height-md);
  font-size: 16px;
}

.poker-card--large {
  width: var(--card-width-lg);
  height: var(--card-height-lg);
  font-size: 20px;
}

/* 状态变体 - 悬浮效果已删除 */

.poker-card--selected {
  border-color: var(--btn-primary);
  background: #fff3e0;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.poker-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.poker-card--played {
  opacity: 0.3;
  cursor: not-allowed;
  position: relative;
  filter: grayscale(80%);
  background: #e0e0e0;
}

.poker-card--played::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  color: #666;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

/* 花色颜色 */
.poker-card--red .card-rank,
.poker-card--red .card-suit {
  color: var(--suit-red);
}

.poker-card--black .card-rank,
.poker-card--black .card-suit {
  color: var(--suit-black);
}

.poker-card--joker .card-rank,
.poker-card--joker .card-joker-text {
  color: var(--joker-color);
}

/* 卡片内容 */
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: bold;
}

.card-rank {
  line-height: 1;
  margin-bottom: 2px;
  font-size: 1.3em;
  font-weight: 900;
}

.card-suit {
  font-size: 1.8em;
  line-height: 1;
  font-weight: bold;
}

.card-joker-text {
  font-size: 1em;
  text-align: center;
  line-height: 1.2;
  font-weight: 900;
}

/* 超小尺寸特殊处理 */
.poker-card--tiny .card-content {
  gap: 0px;
}

.poker-card--tiny .card-rank {
  font-size: 1.1em;
}

.poker-card--tiny .card-suit {
  font-size: 1.3em;
}

.poker-card--tiny .card-joker-text {
  font-size: 0.8em;
}

/* 小尺寸特殊处理 */
.poker-card--small .card-content {
  gap: 2px;
}

.poker-card--small .card-rank {
  font-size: 1.2em;
}

.poker-card--small .card-suit {
  font-size: 1.6em;
}

.poker-card--small .card-joker-text {
  font-size: 0.9em;
}

/* 大尺寸特殊处理 */
.poker-card--large .card-rank {
  font-size: 1.4em;
}

.poker-card--large .card-suit {
  font-size: 2em;
}

.poker-card--large .card-joker-text {
  font-size: 1.1em;
}

/* 动画效果 */
@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.poker-card.flip {
  animation: cardFlip 0.6s ease-in-out;
}
</style>
